<!--
 * @description  : 市管检查-涉案窝点登记组件
 * @descriptionDetail: 市管检查-涉案窝点登记组件
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-09-09 18:43:02
-->
<template>
  <view class="page">
    <theme-navbar :isWhite="false" title="涉案窝点登记" :customBack="handlerBack">
      <view class="nav-right-icon" v-if="!isDisabled" @click="confirmBtn">
        确定
      </view>
    </theme-navbar>
    <u-form :model="densForm" label-position="top" style="padding: 0px 10px;" ref="uForm" :error-type="errorType">
      <u-form-item label="窝点名称" required prop="densName" :label-width="180">
        <u-input :custom-style="valueStyle" placeholder="请输入窝点名称" :disabled="isDisabled" v-model="densForm.densName" />
      </u-form-item>
      <u-form-item label="窝点分类" prop="densType">
        <dic-input
          :keyWord="$u.dic.DIC_KEYS.C_DENS_TYPE"
          :dicCode="densForm.densType"
          :border="false"
          type="select"
          :select-open="dicSelectOpen('densType', $u.dic.DIC_KEYS.C_DENS_TYPE)"
          placeholder="请选择"
          :disabled="true"
          v-model="densForm.densTypeName"
          @changeInputModelData="(name) => { $set(densForm, 'densTypeName', name) }"
          @click="showDic($u.dic.DIC_KEYS.C_DENS_TYPE, densForm.densType, 'densType')" />
      </u-form-item>

      <!-- <u-form-item label="窝点小类" prop="densSubTypeName" :label-width="180" right-icon="arrow-right"> -->
      <!-- <u-input :custom-style="valueStyle" placeholder="请选择窝点小类" :disabled="true" v-model="densForm.densSubTypeName" @tap="!isDisabled&&(densSubTypeShow=true)" /> -->
      <!-- </u-form-item> -->
      <u-form-item label="窝点小类" prop="densSubType">
        <dic-input
          :keyWord="$u.dic.DIC_KEYS.C_DENS_SUBTYPE"
          :dicCode="densForm.densSubType"
          :border="false"
          type="select"
          :select-open="dicSelectOpen('densSubType', $u.dic.DIC_KEYS.C_DENS_SUBTYPE)"
          placeholder="请选择" :disabled="true"
          v-model="densForm.densSubTypeName"
          @changeInputModelData="(name) => { $set(densForm, 'densSubTypeName', name) }"
          @click="showDic($u.dic.DIC_KEYS.C_DENS_SUBTYPE, densForm.densSubType, 'densSubType')" />
      </u-form-item>

      <u-form-item label="窝点地址" label-position="top" prop="addr" :required="true">
        <u-input :border="false" :disabled="isDisabled" placeholder="输入窝点地址" v-model="densForm.addr"></u-input>
      </u-form-item>
      <u-form-item label="窝点gis经纬度" label-position="top" prop="gis">
        <u-input placeholder="请选择" v-model="densForm.gis" :disabled="true"></u-input>
        <u-icon name="map-fill" :color="$theme.u_type_primary" size="44" @click="!isDisabled && setLocation()"></u-icon>
      </u-form-item>
      <u-form-item label-position="top" label="备注">
        <u-input type="textarea" height="100" :auto-height="true" placeholder="请输入" :disabled="isDisabled"
          v-model="densForm.remark" />
      </u-form-item>
      <u-form-item label="上传图片" label-position="top">
        <view class="zk-img-content">
          <m-upload :deletable="!isDisabled" :disabled="isDisabled" :maxCount="picIds" width="150rpx" height="150rpx"
            :file-list="fileList" :multiple="true" index="fileList"
            :uploadParam="{ 'fiGroupCode': $FILE_GROUP_TYPE.c_case_dens }" upApiUrl="uploadBase64ForApp" ref="filePicUpload"
            @on-list-change="changeUpload">
          </m-upload>
        </view>
      </u-form-item>
    </u-form>
    <!-- 字典单选 -->
    <dic-choice
      :keyWord="dicKeyWords"
      :currentSelect="dicCurrentSelect"
      v-model="dicShow"
      @confirm="selectDicConfirm"
      :extFilterFun="extFilterFun">
    </dic-choice>

    <!-- <u-select :list="densTypeDict" v-model="densTypeShow" @confirm="hanlderChangeDensType"></u-select> -->
    <!-- <u-select :list="densSubTypeDict" v-model="densSubTypeShow" @confirm="hanlderChangeDensSubType"></u-select> -->
  </view>
</template>

<script>
import mUpload from '@/components/m-upload.vue';
import DicInput from "@/components/dic_input.vue";
import DicChoice from "@/components/dic_choice.vue";
import { C_DENS_TYPE, } from "@/service/intelligence/mapping/enum.js"

export default {
  components: {
    mUpload,
    DicInput,
    DicChoice
  },
  props: {
    densData: {
      type: Object,
      default: () => { },
    },
    isDisabled: {   // 是否可编辑
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      errorType: ['border-bottom', 'message',],
      valueStyle: {
        marginRight: "5px",
      },
      densForm: {
        uuid: "",
        densName: "",
        addr: "",
        densType: "",
        densTypeName: "",
        densSubType: "",
        densSubTypeName: "",
        gis: "",
        gisX: "",
        gisY: "",
        remark: "",
      },
      rules: {
        // 名称
        densName: [
          {
            required: true,
            message: "请输入名称",
            trigger: ["change", "blur",],
          },
        ],
        addr: [
          {
            required: true,
            message: "请输入窝点地址",
            trigger: ["change", "blur",],
          },
        ],
      },
      // densTypeShow: false,
      // densTypeDict: [],  // 窝点分类字典数据
      // densSubTypeShow: false,
      // densSubTypeDict: [],  // 窝点小类字典数据
      fileList: [],
      picIds: '20',
      dicKeyWords: "",
      dicCurrentSelect: "",
      dicShow: false,
      densType: "",
    }
  },
  onReady() {
    this.$refs.uForm && this.$refs.uForm.setRules(this.rules);
  },
  mounted() {
    this.$refs.uForm.setRules(this.rules);
  },
  created() {
    Object.assign(this.densForm, this.densData,);
    this.fileList = this.densData.fileList ? this.densData.fileList : [];
    this.densType = this.densForm.densType == C_DENS_TYPE.IPRODUCT_DENS ? C_DENS_TYPE.IPRODUCT_DENS_BBNAME : C_DENS_TYPE.STORE_DENS_BBNAME;

    // this.densTypeDict = this.$store.state.dicts['C_DENS_TYPE'];
    // this.densSubTypeDict = this.$store.state.dicts['C_DENS_SUBTYPE'];
  },
  methods: {
    // 选择窝点分类
    // hanlderChangeDensType(p) {
      // this.densForm.densType = p[0].value;
      // this.densForm.densTypeName = p[0].label;
    // },
    // 选择窝点小类
    // hanlderChangeDensSubType(p) {
      // this.densForm.densSubType = p[0].value;
      // this.densForm.densSubTypeName = p[0].label;
    // },
    // 上传/删除图片事件
    changeUpload(list, key) {
      if (list.length > 0) {
        this.fileList = [...list,];
      } else {
        this.fileList = [];
      }
    },
    // 经纬度
    setLocation() {
      if (this.isDisabled) return;
      let self = this;
      // #ifdef H5-DINGDING
      this.$deviceApi
        .getLocationByMap(this.densForm.gisY, this.densForm.gisX)
        .then((latlng) => {
          self.$set(self.densForm, "gis", `${latlng[1]},${latlng[0]}`);
          self.$set(self.dataForm, "gisX",latlng[1]);
          self.$set(self.dataForm, "gisY", latlng[0]);
        })
        .catch((err) => {
          self.$api.toast("获取位置信息失败");
        });
      // #endif

      // #ifndef H5-DINGDING
      this.$u.route("pages/commonPage/modifyLocationMap");
      // #endif
    },
    // 数据返回操作
    updateBackState(obj) {
      console.log('111111', obj);
      let self = this;
      // 经纬度
      if (obj.pos) {
        self.$set(self.densForm, "gis", `${obj.pos.longitude},${obj.pos.latitude}`);
        self.$set(self.densForm, "gisX", obj.pos.longitude);
        self.$set(self.densForm, "gisY", obj.pos.latitude);
      }
    },
    // 确认事件
    confirmBtn() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let fList = [];
          if (this.fileList.length > 0) {
            this.fileList.forEach((item) => {
              fList.push({ gfiId: item.gfiId, });
            });
          }
          this.densForm.fileList = fList;
          this.$emit("back", this.densForm);
          console.log('表单验证通过');
        }
      });
    },
    handlerBack() {
      this.$emit("back", null);
    },
    dicSelectOpen(type, keyWords) {
      if (type == this.dicType) {
        if (this.dicKeyWords == keyWords && this.dicShow) {
          return true;
        }
        return false;
      }
    },
    showDic(key, cur, type) {
      if (this.dicShow || this.isDisabled) return;
      this.dicKeyWords = key;
      this.dicCurrentSelect = cur;
      this.dicShow = true;
      this.dicType = type;
    },
    // 窝点类型过滤处理
    extFilterFun(itm, keyWord) {
      if (keyWord == this.$u.dic.DIC_KEYS.C_DENS_TYPE) {
        return itm.ext1 == "clue";
      } else if (keyWord == this.$u.dic.DIC_KEYS.C_DENS_SUBTYPE) {
        if (this.densType == "IPRODUCT_DENS") {
          return itm.ext1 != "9007"
        } else if (this.densType == "STORE_DENS") {
          return itm.ext1 != "9006";
        } else {
          return true;
        }
      }
      return true;
    },
    selectDicConfirm(e) {
      if (this.dicKeyWords == this.$u.dic.DIC_KEYS.C_DENS_TYPE) { // 窝点类型
        this.densForm.densTypeName = e[0].label;
        this.densForm.densType = e[0].extra.bcbCode;
        this.densType = e[0].extra.bcbPhName;
        this.densForm.densSubType = "";
        this.densForm.densSubTypeName = "";
      } else if (this.dicKeyWords == this.$u.dic.DIC_KEYS.C_DENS_SUBTYPE) { // 窝点小类
        this.densForm.densSubTypeName = e[0].label;
        this.densForm.densSubType = e[0].extra.bcbCode;
      }



    },


  },
}
</script>

<style lang="scss" scoped>
@import "@/style/common/rightMenu.scss";
</style>
